import { PureComponent } from 'react';
import moment from 'moment';
import styles from './StaffInfoList.less';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    DatePicker,
    Icon,
    Button
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
 	labelCol: { span: 10 },
   	wrapperCol: { span: 14 },
};
let workChangeInput = null;
@Form.create({
	onValuesChange(props, changedValues, allValues){
		if(workChangeInput == null) {
			workChangeInput = changedValues;
		}else {
			Object.assign(workChangeInput,workChangeInput,changedValues);
		}
	}
})
class UpdateForm extends PureComponent {
	
	constructor(props) {
	    super(props);
	   	if(props.values) {
	    	this.state = {
		    	workList:props.values
		    }
	    }else {
	    	this.state = {
		    	workList:[]
		    }
	    }
	}
 	
 	componentWillReceiveProps(nextProps) {
		if(undefined != nextProps.values && nextProps.values !== this.props.values) {
	      this.setState({workList: [...nextProps.values,{id: '1',punid: ''}]});
		}
		
	}

	handleLocalUpdate = (event,res) => {
		event.preventDefault();
		const { form,handleUpdateByWork } = this.props;

	    form.validateFields((err, fieldsValue) => {
	        if (err) return;
		    form.resetFields();
		    if(workChangeInput == null) {
				fieldsValue.id = res.id;
				fieldsValue.punid = res.punid;
				fieldsValue.corporate_name = res.corporate_name;
				fieldsValue.position = res.position;
				fieldsValue.work_experience_start_time = res.work_experience_start_time;
				fieldsValue.work_experience_end_time = res.work_experience_end_time;
				fieldsValue.quit_reason = res.quit_reason;
				fieldsValue.witness = res.witness;
				fieldsValue.witness_phone = res.witness_phone;
			}else {
				Object.assign(fieldsValue,res,workChangeInput);
			}
			if(fieldsValue.work_experience_start_time) {
      			fieldsValue.work_experience_start_time = moment(moment(fieldsValue.work_experience_start_time)._d).format("YYYY-MM-DD");
      		}
			if(fieldsValue.work_experience_end_time) {
      			fieldsValue.work_experience_end_time = moment(moment(fieldsValue.work_experience_end_time)._d).format("YYYY-MM-DD");
      		}
		    handleUpdateByWork(fieldsValue);
		});
	};
	
	
	workList = () => {
		const { handleWork,workCurrentIndex,cancelWork,handleDeleteByWork } = this.props;
  		const { getFieldDecorator } = this.props.form;
  		const _this = this;
  		return this.state.workList.map(function(res,index) {
			const editWork = res.id == workCurrentIndex ? true:false;
		  	return (
				<div style={res.id != 1?{display: 'block',marginBottom:'0'}:{display: 'none',marginBottom:'0'}}>
			      	<div className={styles.eduContainer}>
			      		<span>工作经历{index + 1}</span>
			      		<div style={{float: "right"}}>
			      			<div className={styles.eduEdit} onClick={handleWork.bind(_this,res)}>
			      				<Icon type="edit"/>编辑
			      			</div>
			      			<Icon type="delete" style={{fontSize: '16px',color: '#c0c4cc'}} onClick={handleDeleteByWork.bind(_this,res)}/>
			      		</div>
			      	</div>
			      	<Form layout="vertical"  style={editWork?{display: "block"}:{display: 'none'}}>
								<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			
							        <Col  md={12} sm={24}>
								        <FormItem  label="公司名称">
								            {getFieldDecorator('corporate_name', {
								            rules: [{ required: true, message: '请输入1-50位字符的公司名称', max: 50}],
								            initialValue: res.corporate_name,
								            })(<Input placeholder="1-50位字符" />)}
								        </FormItem>
							        </Col>
							        <Col  md={12} sm={24}>
								        <FormItem  label="职位">
								            {getFieldDecorator('position', {
								            rules: [{ required: true, message: '请输入1-10位字符的职位名称', max: 10}],
								            initialValue: res.position,
								            })(<Input placeholder="1-10位字符" />)}
								        </FormItem>
							        </Col>
								
						    	</Row>
			    				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			
								    <Col md={12} sm={24}>
							          <FormItem  label="工作开始时间">
							              {getFieldDecorator('work_experience_start_time',{
							              	initialValue: res.work_experience_start_time?moment(res.work_experience_start_time):null,
							              })(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
							          </FormItem>
							        </Col>
								    <Col md={12} sm={24}>
							          <FormItem  label="工作结束时间">
							              {getFieldDecorator('work_experience_end_time',{
							              	initialValue: res.work_experience_end_time?moment(res.work_experience_end_time):null,
							              })(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
							          </FormItem>
							        </Col>
						
						    	</Row>
						    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
						
							        <Col  md={12} sm={24}>
								        <FormItem  label="离职原因">
								            {getFieldDecorator('quit_reason', {
								            rules: [{ required: false, message: '最多输入50位字符', max: 50}],
								            initialValue: res.quit_reason,
								            })(<Input placeholder="1-50位字符" />)}
								        </FormItem>
							        </Col>
							        <Col  md={12} sm={24}>
								        <FormItem  label="证明人">
								            {getFieldDecorator('witness', {
								            rules: [{ required: true, message: '最多输入10位字符', max: 10}],
								            initialValue: res.witness,
								            })(<Input placeholder="1-10位字符" />)}
								        </FormItem>
							        </Col>
								
						    	</Row>
						    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
						
							        <Col md={12} sm={24}>
							          <FormItem  label="证明人联系电话">
							              {getFieldDecorator('witness_phone', {
							              rules: [{ required: false, message: '手机号码格式不符！',  pattern:/^1(3|4|5|6|7|8|9)\d{9}$/ }],
							              initialValue: res.witness_phone,
							              })(<Input placeholder="正规手机号格式" />)}
							          </FormItem>
							        </Col>
						
						    	</Row>
						    	<Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{marginBottom: '30px'}}>
								    <Col md={12} sm={24}>
							    		<Button 
						            	size="large" 
						            	style={{marginRight: '10px'}}
						            	onClick={()=> {
						            		const { form } = _this.props;
			  								form.resetFields();
						            		cancelWork();
						            	}}>
						            	取消
						           		</Button>
							            <Button size="large" type="primary" onClick={()=>_this.handleLocalUpdate(event,res)}>保存</Button>
							        </Col>
							    </Row>

						</Form>
						<Form  {...formItemLayout} style={editWork?{display: "none"}:{display: 'block'}}>
					    		<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			
							        <Col  md={12} sm={24}>
								        <FormItem  label="公司名称">
								            {getFieldDecorator('corporate_name',{
								            rules: [{ message: '请输入1-50位字符的公司名称', max: 50}],
								            })(<span>{res.corporate_name}</span>)}
								        </FormItem>
							        </Col>
							        <Col  md={12} sm={24}>
								        <FormItem  label="职位">
								            {getFieldDecorator('position',{
								            rules: [{ message: '请输入1-10位字符的职位名称', max: 10}],
								            })(<span>{res.position}</span>)}
								        </FormItem>
							        </Col>
								
						    	</Row>
			    				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
			
								    <Col md={12} sm={24}>
							          <FormItem  label="工作开始时间">
							              {getFieldDecorator('work_experience_start_time')(<span>{res.work_experience_start_time?moment(res.work_experience_start_time).format('YYYY-MM-DD'):null}</span>)}
							          </FormItem>
							        </Col>
								    <Col md={12} sm={24}>
							          <FormItem  label="工作结束时间">
							              {getFieldDecorator('work_experience_end_time')(<span>{res.work_experience_end_time?moment(res.work_experience_end_time).format('YYYY-MM-DD'):null}</span>)}
							          </FormItem>
							        </Col>
						
						    	</Row>
						    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
						
							        <Col  md={12} sm={24}>
								        <FormItem  label="离职原因">
								            {getFieldDecorator('quit_reason',{
								            rules: [{ required: false, message: '最多输入50位字符', max: 50}],
								            })(<span>{res.quit_reason}</span>)}
								        </FormItem>
							        </Col>
							        <Col  md={12} sm={24}>
								        <FormItem  label="证明人">
								            {getFieldDecorator('witness',{
								            	rules: [{ message: '最多输入10位字符', max: 10}],
								            })(<span>{res.witness}</span>)}
								        </FormItem>
							        </Col>
								
						    	</Row>
						    	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
						
							        <Col md={12} sm={24}>
							          <FormItem  label="证明人联系电话">
							              {getFieldDecorator('witness_phone',{
							              	rules: [{ required: false, message: '手机号码格式不符！',  pattern:/^1(3|4|5|6|7|8|9)\d{9}$/ }],
							              })(<span>{res.witness_phone}</span>)}
							          </FormItem>
							        </Col>
						
						    	</Row>
		
						</Form>
		      	</div>
		  	)
		
		});
  	}

  render() {

return (
	<div>
		{this.workList()}
	</div>
);
  }

}

export default UpdateForm;
